<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>个人简介生成界面</title>
        <style>
          #main{color:red;}
          .name{font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;lighting-color: burlywood;font-size: larger;}
          .wage{background-color:rgb(196, 226, 255)}
          span.title{background-color:yellow;}
          #Name{background-color: aquamarine;}
        </style>
    </head>
    <body background="img.webp" style="margin:0 auto;width:1000px" id="main">
        <div class="name" ><span class="title" id="Name"> 姓名：</span><span id="name"></span></div>
        <div class="sex" ><span class="title">性别：</span><span id="sex" name="sex"></span></div>
        <div class="Age" ><span class="title">年龄：</span><span id="age" name="age"></span></div>
        <div class="wage" ><span class="title">理想薪酬：</span><span id="wage" name="wage"></span></div>
        <div class="LX" ><span class="title">联系方式：</span><span id="lx" name="lx"></span></div>
        <div class="xl" ><span class="title">学历：</span><span id="xl"></span></div>
        <div class="qz" ><span class="title">求职意向：</span><span id="DJ"></span></div>
        <div class="ex" ><span class="title">工作经历：</span><span id="experience"></span></div>
        <div class="zs" ><span class="title">荣誉证书：</span><span id="zs" name="zs"></span></div>
        <div class="js" ><span class="title">自我评价：</span><span id="js" name="js"></span></div>

    </body>
    <script>
        function geturlparam() {
                let that = this
                // window.location.href 获取地址 实际项目中是这样获取url？后面的参数的，这里为了展示就自己在函数中定义了
                let url = window.location.href
                let p = url.split('?')[1]//截取问号后面参数
                let keyValue = p.split('&');//以&为分割转换成数组
                let obj = {};//用来接收参数的
                for (let i = 0; i < keyValue.length; i++) {
                  let item = keyValue[i].split('=');//继续分割
                  obj[ item[0]] =item[1];//type为键，1为值给obj对象
                }
                return obj      //  {type:'1',id:'2'}
              }
            console.log(geturlparam()) 
            data=geturlparam();

            name=data["Username"];//name属性对应的属性值
            sex=data["sex"]
            //hobby=data["hobby"]
            age=data["Age"]
            wage=data["wage"]
            lx=data["PhoneNumber"]
            xl=data["xl"]
            DJ=data["DC"]
            ex=data["EX"]
            RY=data["RY"]
            js=data["js"]
            document.getElementById("name").innerText=decodeURI(name);
            document.getElementById("sex").innerText=decodeURI(sex);
            document.getElementById("age").innerText=decodeURI(age);
            document.getElementById("xl").innerText=decodeURI(xl);
            document.getElementById("wage").innerText=decodeURI(wage);
            document.getElementById("lx").innerText=decodeURI(lx);
            document.getElementById("DJ").innerText=decodeURI(DJ);
            document.getElementById("experience").innerText=decodeURI(ex);
            document.getElementById("zs").innerText=decodeURI(RY);
            document.getElementById("js").innerText=decodeURI(js);
    </script> 
</html>